import { storeAll } from '@/store'
import { observer } from 'mobx-react-lite'
import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

const Maintanence: React.FC = () => {
	const chartRef = useRef<HTMLDivElement>(null)
	const { mainTenance: { maintenances } } = storeAll
	useEffect(() => {
		if (!chartRef.current) return
		const obj: { [key: string]: number } = {}
		maintenances.forEach(item => {
			if (!obj[item.parkingType]) {
				obj[item.parkingType] = 1
			} else {
				obj[item.parkingType]++
			}
		})
		const data: any[] = []
		for (let it in obj) {
			data.push({
				name: it,
				value: obj[it]
			})
		}
		const option: any = {
			title: {
				text: '维修统计',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [
				{
					name: 'Access From',
					type: 'pie',
					radius: '50%',
					data,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		const chart: echarts.ECharts = echarts.init(chartRef.current)
		chart.setOption(option)
		// 组件卸载
		return () => {
			chart.dispose()
		}
	}, [maintenances])
	return <div ref={chartRef} style={{ width: "620px", height: "400px" }}></div>
}

export default observer(Maintanence)